<template>
  <view class="page-container">
    <!-- 主内容区 -->
    <scroll-view
        class="main-content"
        scroll-y
        :show-scrollbar="false"
        safe-area-inset-bottom
    >
      <!-- 统计卡片 -->
      <view class="stats-card">
        <view class="stats-item mastered">
          <view class="stats-value">
            <u-count-to
                :start-val="0"
                :end-val="wordData.masteredNumbers"
                :duration="1500"
                separator=","
                color="#4cd964"
                font-size="42"
                bold
            ></u-count-to>
          </view>
          <view class="stats-label">已掌握</view>
          <view v-if="wordData.masteredNumbersRatio*1>0" class="stats-trend">
            <u-icon name="arrow-up" color="#4cd964" size="24"></u-icon>
            <text class="trend-text">+{{ wordData.masteredNumbersRatio * 1 }}%</text>
          </view>
          <view v-if="wordData.masteredNumbersRatio*1===0" class="stats-trend">
            <u-icon name="minus" color="#ff9500" size="24"></u-icon>
            <text class="trend-text">持平</text>
          </view>
          <view v-if="wordData.masteredNumbersRatio*1<0" class="stats-trend">
            <u-icon name="arrow-down" color="#ff5500" size="24"></u-icon>
            <text class="trend-text">-{{ wordData.masteredNumbersRatio * 1 }}%</text>
          </view>
        </view>
        <view class="stats-item learning">
          <view class="stats-value">
            <u-count-to
                :start-val="0"
                :end-val="wordData.learnNumbers"
                :duration="1500"
                separator=","
                color="#ff9500"
                font-size="42"
                bold
            ></u-count-to>
          </view>
          <view class="stats-label">学习中</view>
          <view v-if="wordData.learnNumbersRatio*1>0" class="stats-trend">
            <u-icon name="arrow-up" color="#4cd964" size="24"></u-icon>
            <text class="trend-text">+{{ wordData.learnNumbersRatio * 1 }}%</text>
          </view>
          <view v-if="wordData.learnNumbersRatio*1===0" class="stats-trend">
            <u-icon name="minus" color="#ff9500" size="24"></u-icon>
            <text class="trend-text">持平</text>
          </view>
          <view v-if="wordData.learnNumbersRatio*1<0" class="stats-trend">
            <u-icon name="arrow-down" color="#ff5500" size="24"></u-icon>
            <text class="trend-text">-{{ wordData.learnNumbersRatio * 1 }}%</text>
          </view>
        </view>
        <view class="stats-item forgotten">
          <view class="stats-value">
            <u-count-to
                :start-val="0"
                :end-val="wordData.forgetNumbers"
                :duration="1500"
                separator=","
                color="#ff5500"
                font-size="42"
                bold
            ></u-count-to>
          </view>
          <view class="stats-label">遗忘词</view>
          <view v-if="wordData.forgetNumbersRatio*1>0" class="stats-trend">
            <u-icon name="arrow-up" color="#4cd964" size="24"></u-icon>
            <text class="trend-text">+{{ wordData.forgetNumbersRatio * 1 }}%</text>
          </view>
          <view v-if="wordData.forgetNumbersRatio*1===0" class="stats-trend">
            <u-icon name="minus" color="#ff9500" size="24"></u-icon>
            <text class="trend-text">持平</text>
          </view>
          <view v-if="wordData.forgetNumbersRatio*1<0" class="stats-trend">
            <u-icon name="arrow-down" color="#ff5500" size="24"></u-icon>
            <text class="trend-text">-{{ wordData.forgetNumbersRatio * 1 }}%</text>
          </view>
        </view>
      </view>

      <!-- 词汇分类 -->
      <view class="word-categories">
        <!-- 已掌握词汇 -->
        <view class="category-card" @click="goToWordList('mastered')">
          <view class="category-header">
            <view class="category-title">
              <u-icon name="checkmark-circle" color="#4cd964" size="36"></u-icon>
              <text>已掌握词汇</text>
            </view>
            <view class="category-count">
              <text>{{ wordData.masteredNumbers }}词</text>
              <u-icon name="arrow-right" color="#909399" size="28"></u-icon>
            </view>
          </view>
          <view class="category-progress">
            <u-line-progress
                :percentage="masteredPercent"
                activeColor="#4cd964"
                inactiveColor="#ebf8ed"
                :show-text="false"
                height="8"
            ></u-line-progress>
            <view class="progress-text">掌握率 {{ masteredPercent }}%</view>
          </view>
          <view class="category-desc">这些词汇你已经熟练掌握，继续保持哦！</view>
        </view>

        <!-- 学习中词汇 -->
        <view class="category-card" @click="goToWordList('learning')">
          <view class="category-header">
            <view class="category-title">
              <u-icon name="clock" color="#ff9500" size="36"></u-icon>
              <text>学习中词汇</text>
            </view>
            <view class="category-count">
              <text>{{ wordData.learnNumbers }}词</text>
              <u-icon name="arrow-right" color="#909399" size="28"></u-icon>
            </view>
          </view>
          <view class="category-progress">
            <u-line-progress
                :percentage="learningPercent"
                active-color="#ff9500"
                inactive-color="#fff4e5"
                :show-text="false"
                height="8"
            ></u-line-progress>
            <view class="progress-text">学习进度 {{ learningPercent }}%</view>
          </view>
          <view class="category-desc">这些词汇正在学习中，加油完成它们！</view>
        </view>

        <!-- 遗忘词汇 -->
        <view class="category-card" @click="goToWordList('forgotten')">
          <view class="category-header">
            <view class="category-title">
              <u-icon name="close-circle" color="#ff5500" size="36"></u-icon>
              <text>遗忘词汇</text>
            </view>
            <view class="category-count">
              <text>{{ wordData.forgetNumbers }}词</text>
              <u-icon name="arrow-right" color="#909399" size="28"></u-icon>
            </view>
          </view>
          <view class="category-progress">
            <u-line-progress
                :percentage="forgottenPercent"
                active-color="#ff5500"
                inactive-color="#fff0e8"
                :show-text="false"
                height="8"
            ></u-line-progress>
            <view class="progress-text">遗忘率 {{ forgottenPercent }}%</view>
          </view>
          <view class="category-desc">这些词汇需要加强复习，避免再次遗忘</view>
        </view>
      </view>

      <!-- 复习建议 -->
      <view class="review-suggestion">
        <view class="section-title">复习建议</view>
        <view class="suggestion-card">
          <view class="suggestion-content">
            <u-icon name="bell" color="#3e7bfa" size="36"></u-icon>
            <view class="suggestion-text">
              <view class="suggestion-title">今日复习计划</view>
              <view class="suggestion-desc">{{suggestion}}</view>
            </view>
          </view>
<!--          <view>-->
<!--            <u-button-->
<!--                type="primary"-->
<!--                shape="circle"-->
<!--                size="mini"-->
<!--                @click="startReview"-->
<!--            >开始复习-->
<!--            </u-button>-->
<!--          </view>-->
        </view>
      </view>

      <!-- 底部留白 -->
      <view class="bottom-space"></view>
    </scroll-view>
  </view>
</template>

<script>
import {wordData} from "../api/enStudent";

export default {
  data() {
    return {
      wordData: {},
      suggestionWords: 20
    };
  },
  computed: {
    masteredPercent() {
      return this.wordData.masteryRate * 1
    },
    learningPercent() {
      return this.wordData.learnRate * 1
    },
    forgottenPercent() {
      return this.wordData.forgetRate * 1
    },
    suggestion() {
      if (this.wordData.forgetNumbers && this.wordData.forgetNumbers * 1 > 0) {
        return `建议优先复习 ${this.wordData.forgetNumbers} 个遗忘词汇！`
      }
      if (this.wordData.masteredNumbers && this.wordData.masteredNumbers * 1 > 0) {
        return '当前没有遗忘词汇，建议温故已掌握单词！'
      }
      return '当前所有单词处于学习中，且无遗忘，争取早日掌握正在学习的单词！'
    }
  },
  created() {
    this.getWordStats();
  },
  methods: {
    async getWordStats() {
      this.wordData = await wordData()
    },
    goToWordList(type) {
      uni.navigateTo({
        url: `/pages/components/WordPreview?type=${type}`
      });
    },
    startReview() {
      uni.navigateTo({
        url: '/components/WordPreview/start'
      });
    }
  }
};
</script>

<style scoped lang="scss">
.page-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  position: relative;
}

.nav-right {
  padding-right: 16rpx;
}

.main-content {
  padding: 24rpx 30rpx 0;
  height: calc(100vh - var(--window-top) - 88rpx);
}

::v-deep uni-scroll-view {
  width: auto !important;
}

.stats-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .stats-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 0 10rpx;

    &:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 60rpx;
      background-color: #f1f1f1;
    }

    .stats-value {
      margin-bottom: 8rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
    }

    .stats-label {
      font-size: 24rpx;
      color: #606266;
      margin-bottom: 10rpx;
    }

    .stats-trend {
      display: flex;
      align-items: center;
      font-size: 22rpx;

      .u-icon {
        margin-right: 6rpx;
      }

      .trend-text {
        color: #909399;
      }
    }
  }
}

.word-categories {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  margin-bottom: 36rpx;

  .category-card {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 28rpx;
    position: relative;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

    .category-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

      .category-title {
        display: flex;
        align-items: center;

        text {
          font-size: 28rpx;
          font-weight: 600;
          color: #303133;
          margin-left: 12rpx;
        }
      }

      .category-count {
        display: flex;
        font-size: 26rpx;
        color: #606266;
      }
    }

    .category-progress {
      margin-bottom: 16rpx;

      .progress-text {
        font-size: 22rpx;
        color: #909399;
        margin-top: 8rpx;
        text-align: right;
      }
    }

    .category-desc {
      font-size: 24rpx;
      color: #606266;
      margin-right: 40rpx;
    }

    .u-icon {
      right: 28rpx;
      bottom: 28rpx;
    }
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20rpx;
  position: relative;
  padding-left: 16rpx;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8rpx;
    height: 28rpx;
    background-color: #3e7bfa;
    border-radius: 4rpx;
  }
}

.review-suggestion {
  margin-bottom: 36rpx;

  .suggestion-card {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

    .suggestion-content {
      display: flex;
      align-items: center;

      .u-icon {
        margin-right: 16rpx;
      }

      .suggestion-text {
        .suggestion-title {
          font-size: 26rpx;
          font-weight: 600;
          color: #303133;
          margin-bottom: 4rpx;
        }

        .suggestion-desc {
          font-size: 22rpx;
          color: #606266;
        }
      }
    }
  }
}

.bottom-space {
  height: 120rpx;
}
</style>
